<template>
  <el-card style="max-width: 90vw; max-height: 70px">
    <el-form ref="queryFormRef" :inline="true">
      <el-form-item prop="keywords" label="关键字">
        <el-input
          placeholder="角色名称"
          clearable
          v-model="queryParams.keywords"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="getTypeData()"
          ><i-ep-search />搜索</el-button
        >
        <el-button @click="reset()"><i-ep-refresh />重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <el-card style="max-width: 90vw">
    <template #header>
      <div class="card-header">
        <el-button type="success" @click="openDialog()">新增</el-button>
        <el-button type="danger" @click="handleDelete()">删除</el-button>
      </div>
    </template>
    <!-- 表格 -->
    <el-table
      :data="typeList"
      style="width: 100%"
      border
      @selection-change="handleSelectionChange"
      row-key="id"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column prop="name" label="字典类型名称" width="200" />
      <el-table-column label="字典类型编码" prop="code" width="200" />
      <el-table-column label="状态" align="center" width="100">
        <template #default="scope">
          <el-tag v-if="scope.row.status === 1" type="success">启用</el-tag>
          <el-tag v-else type="info">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="remark" align="center" />
      <el-table-column label="操作" width="180" align="center">
        <template #default="scope">
          <el-button
            link
            size="small"
            type="primary"
            @click="openDialog(scope.row.id)"
          >
            编辑
          </el-button>
          <el-button
            size="small"
            type="danger"
            link
            @click="handleDelete(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[2, 5, 10, 15]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
  <!-- 新增弹窗 -->
  <el-dialog
    v-model="dialog.visible"
    :title="dialog.title"
    width="500px"
    @close="closeDialog"
  >
    <el-form ref="dataFormRef" :model="form" label-width="80px">
      <el-form-item label="字典名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入字典名称" />
      </el-form-item>
      <el-form-item label="字典编码" prop="code">
        <el-input v-model="form.code" placeholder="请输入字典编码" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="0">停用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="form.remark"
          type="textarea"
          placeholder="字典类型备注"
          :autosize="{ minRows: 2, maxRows: 4 }"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
  
  <script setup lang="ts">
import {
  getList,
  getBack,
  addList,
  updateList,
  delList,
} from "@/api/dict/index";

const dataFormRef = ref(ElForm);
const queryFormRef = ref(ElForm);
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
});
const typeList = ref([]);
const total = ref(0);
const currentPage4 = ref(1);
const pageSize4 = ref(10);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const oid = ref(0);
const ids = ref([]);
const dialog = reactive({
  title: "",
  visible: false,
});
const form = ref({
  name: "",
  code: "",
  status: 1,
  remark: "",
});

// 获取数据/查询数据
const getTypeData = async () => {
  getList(queryParams).then((data) => {
    typeList.value = data.list;
    total.value = data.total;
  });
};
const reset = () => {
  queryFormRef.value.resetFields();
  queryParams.pageNum = 1;
  queryParams.keywords = "";
  getTypeData();
};

// 分页
const handleSizeChange = async (val: number) => {
  queryParams.pageSize = val;
  queryParams.pageNum = 1;
  let res = await getList(queryParams);
  typeList.value = Object.values(res)[0];
};
const handleCurrentChange = async (val: number) => {
  queryParams.pageNum = val;
  let res = await getList(queryParams);
  typeList.value = Object.values(res)[0];
};

// 添加/修改
const handleSubmit = async () => {
  dataFormRef.value.validate((ids: any) => {
    if (ids) {
      const dictTypeId = form.value.id;
      if (dictTypeId) {
        // 修改
        updateList(dictTypeId, form.value).then(() => {
          ElMessage.success("修改成功");
          closeDialog(); //关闭弹窗
          getTypeData(); //刷新列表
        });
      } else {
        // 添加
        addList(form.value).then(() => {
          ElMessage.success("新增成功");
          closeDialog(); //关闭弹窗
          getTypeData(); //刷新列表
        });
      }
    }
  });
};

// 复选框事件
function handleSelectionChange(selection: any) {
  ids.value = selection.map((item: any) => item.id);
}
// 删除类型
const handleDelete = (dictTypeId?: any) => {
  const dictTypeIds = [dictTypeId || ids.value].join(",");
  if (!dictTypeIds) {
    ElMessage.warning("请勾选删除项");
    return;
  }

  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    delList(dictTypeIds).then(() => {
      ElMessage.success("删除成功");
      getTypeData();
    });
  });
};

// 关闭弹窗
const closeDialog = () => {
  dialog.visible = false;
};
// 打开弹窗
const openDialog = (ids?: any) => {
  dialog.visible = true;
  if (ids) {
    dialog.title = "修改字典类型";
    getBack(ids).then((res) => {
      form.value = res;
    });
  } else {
    dialog.title = "新增字典类型";
    reForm();
  }
};

// 重置表单
const reForm = () => {
  form.value = {
    name: "",
    code: "",
    status: 1,
    remark: "",
  };
};

onMounted(() => {
  getTypeData();
});
</script>
<style scoped lang="less">
.el-card {
  margin-bottom: 20px;
}
</style>